<!DOCTYPE html>
<html>
<head>
<meta name="description" content="React Tweet Box Demo">
<script src="react1301.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React Tweet Box</title>
</head>
<body>
<script>
console.log("hello aaa");
// 自定义元素
var TweetBox = React.createClass({
  getInitialState: function() {
    return {
      text: "",
      photoAdded: false
    };
  },
  handleChange: function(event) {
    this.setState({ text: event.target.value });
  },
  togglePhoto: function(event) {
    this.setState({ photoAdded: !this.state.photoAdded });
  },
  overflowAlert: function() {
    if (this.remainingCharacters() < 0) {
      if (this.state.photoAdded) {
        var beforeOverflowText = this.state.text.substring(140 - 23 - 10, 140 - 23);
        var overflowText = this.state.text.substring(140 - 23);
      } else {
        var beforeOverflowText = this.state.text.substring(140 - 10, 140);
        var overflowText = this.state.text.substring(140);
      }

      return '<div className="alert alert-warning"><strong>Oops! Too Long:</strong>'
      	+ '&nbsp;...{beforeOverflowText}'
        +  '<strong className="bg-danger">{overflowText}</strong></div>';
      // );
    } else {
      return "";
    }
  },
  remainingCharacters: function() {
    if (this.state.photoAdded) {
      return 140 - 23 - this.state.text.length;
    } else {
      return 140 - this.state.text.length;
    }
  },
  render: function() {
    return 
      '<div className="well clearfix">' + 
        '{ this.overflowAlert() }' + 
        '<textarea className="form-control"' + 
                  'onChange={this.handleChange}></textarea>' + 
        '<br/>' + 
        '<span>{ this.remainingCharacters() }</span>' + 
        '<button className="btn btn-primary pull-right"' + 
          'disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet</button>' + 
        '<button className="btn btn-default pull-right"' + 
          'onClick={this.togglePhoto}>' + 
          '{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }' + 
        '</button>' + 
      '</div>';
    //);
  }
});

   /* @param {ReactElement} nextElement Component element to render.
   * @param {DOMElement} container DOM element to render into.
   * @param {?function} callback function triggered on completion
   * @return {ReactComponent} Component instance rendered in `container`.
   */

React.render(
  React.createElement(TweetBox),
  document.body
);
</script>
</body>
</html>